@import "base.scss";
@import "mixin.scss";

//cover
.dialogCover {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(7,17,27,0.3);
    z-index: 9999;
    -webkit-transition:all .2s;
    -moz-transition:all .2s;
    -ms-transition:all .2s;
    -o-transition:all .2s;
    transition: all .2s;
}

//common CSS
.dialog {
    top: 50%;
    left: 50%;
    @include borderRadius(3px);
    background-color: $colorfff;
    z-index: 10000;
    &.showPopup {
        -webkit-animation: showPopup .2s;
        -moz-animation: showPopup .2s;
        -ms-animation: showPopup .2s;
        -o-animation: showPopup .2s;
        animation: showPopup .2s;
    }
    &.hidePopup {
        -webkit-animation: hidePopup .2s;
        -moz-animation: hidePopup .2s;
        -ms-animation: hidePopup .2s;
        -o-animation: hidePopup .2s;
        animation: hidePopup .2s;
    }
    .content {
        .pic {
            width: 4 * $fontSize10 - 3;
            height: 4 * $fontSize10 + 2;
            margin:0 auto;
            background-image: url('../img/icons/dialog.png');
            background-repeat: no-repeat;
            &.success {
                background-position: - ($fontSize20 + 5) 0;
            }
            &.question {
                background-position: - ($fontSize20 + 5) (- 5 * $fontSize10);
            }
            &.info {
                background-position: - ($fontSize20 + 5) (- 10 * $fontSize10);
            }
            &.error {
                background-position: - ($fontSize20 + 5) (- 15 * $fontSize10);
            }
        }
        .text {
            margin:$fontSize14 + 1 0 $fontSize20 + 5;
            line-height: $fontSize18;
            font-size: $fontSize14;
            color: $color666;
        }
    }
}
@-webkit-keyframes showPopup {
    0%{
        @include transform(scale(.5));
    }to{
        @include transform(scale(1));
    }
}
@-moz-keyframes showPopup {
    0%{
        @include transform(scale(.5));
    }to{
        @include transform(scale(1));
    }
}
@-ms-keyframes showPopup {
    0%{
        @include transform(scale(.5));
    }to{
        @include transform(scale(1));
    }
}
@-o-keyframes showPopup {
    0%{
        @include transform(scale(.5));
    }to{
        @include transform(scale(1));
    }
}
@keyframes showPopup {
    0%{
        @include transform(scale(.5));
    }to{
        @include transform(scale(1));
    }
}
@-webkit-keyframes hidePopup {
    0%{
        @include transform(scale(1));
    }to{
        @include transform(scale(.5));
    }
}
@-moz-keyframes hidePopup {
    0%{
        @include transform(scale(1));
    }to{
        @include transform(scale(.5));
    }
}
@-ms-keyframes hidePopup {
    0%{
        @include transform(scale(1));
    }to{
        @include transform(scale(.5));
    }
}
@-o-keyframes hidePopup {
    0%{
        @include transform(scale(1));
    }to{
        @include transform(scale(.5));
    }
}
@keyframes hidePopup {
    0%{
        @include transform(scale(1));
    }to{
        @include transform(scale(.5));
    }
}

//edit article
.editorDialog {
    width: 75 * $fontSize10;
    margin:- 25 * $fontSize10 0 0 (- (37 * $fontSize10 + 5));
    .titleBox {
        padding:0 3 * $fontSize10 + 5;
        height: 4 * $fontSize10;
        line-height: 4 * $fontSize10;
        font-size: $fontSize14;
        color: $color333;
        font-weight: 700;
        border-bottom: 1px solid $colore5;
        .close {
            font-size: $fontSize14;
            color: $colorab;
        }
    }
    .content {
        margin:3 * $fontSize10 3 * $fontSize10 + 5 0;
        .theme {
            border-bottom: 1px solid $colore5;
        }
        .inputBox {
            padding:$fontSize12 + 1 $fontSize20;
            .themeIcon {
                width: $fontSize16;
                height: $fontSize16;
                margin-right: $fontSize16 / 2;
                vertical-align: top;
                background: url("../img/editor/theme.png") no-repeat center center;
            }
            .tagsIcon {
                font-size: $fontSize16;
                color: $colorab;
                margin-right: $fontSize16 / 2;
                vertical-align: top;
            }
            .themeIcon,.iunptTag {
                width: 61 * $fontSize10;
                height: 100%;
                display: flex;
                flex-direction: row;
                align-items: center;
            }
            .wordTags {
                display: flex;
                flex-wrap: nowrap;
            }
            .tag-checked-name {
                display: inline-block;
                position: relative;
                height: $fontSize20;
                line-height: $fontSize20;
                color:$color666;
                font-size: $fontSize12;
                padding: 0 $fontSize20 0 $fontSize16 / 2;
                margin-right: $fontSize10 / 2;
                @include border(1px,solid,$colore5);
                @include borderRadius(5px);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                background-color: #edeff0;
                &:first-child {
                    margin-left: 0;
                }
                em {
                    display: block;
                    position: absolute;
                    top: $fontSize10 / 2;
                    right: $fontSize10 / 5;
                    width: $fontSize12;
                    height: $fontSize12;
                    cursor: pointer;
                    @include transform(rotate(45deg));
                    &:before,&:after {
                        display: block;
                        position: absolute;
                        content: '';
                        background: #888;
                    }
                    &:before {
                        top: 0;
                        left: $fontSize10 / 2;
                        width: $fontSize10 / 10;
                        height: $fontSize10 + 1;
                    }
                    &:after {
                        top: $fontSize10 / 2;
                        width: $fontSize10 + 1;
                        height: $fontSize10 / 10;
                    }
                }
                input {
                    font-size: $fontSize12 + 1;
                    width: 44 * $fontSize10;
                    border:none;
                    outline: none;
                    background: $colorfff;
                    &::placeholder {
                        color: $colorab;
                    }
                }
            }
        }
        .themeBox,.tagBox {
            display: none;
            margin:$fontSize12 / 3 $fontSize14 + 1 0;
            padding-bottom:$fontSize16 / 2;
            border-top: 1px solid $colore5;
        }
        a.dib {
            height: 2 * $fontSize12;
            line-height: 2 * $fontSize12;
            padding:0 $fontSize20;
            font-size: $fontSize12 + 1;
            color: $color666;
            margin:$fontSize16 / 2 $fontSize16 / 2 0 0;
            @include borderRadius($fontSize20);
            @include link-posColor(#edeff0,#d3d3d3);
        }
        .tagBox {
            max-height: 9 * $fontSize10 + 6;
            overflow-y: auto;
            overflow-x: hidden;
        }
        .selectBox {
            margin:$fontSize20 0;
            height: 3 * $fontSize10 + 5;
            line-height: 2 * $fontSize16;
            padding-right: 3 * $fontSize10 + 5;
            border: none;
            > div {
                width: 14 * $fontSize10;
                font-size: $fontSize12 + 1;
            }
            .authorization {
                margin:0 $fontSize12 + 1 0 0;
                background: #edeff0;
                .icon {
                    border-left: $fontSize10 / 10 solid $colorea;
                }
            }
            .postSetting {
                margin:0 0 0;
                @include border(1px,solid,$color333);
                background: $color333;
                .icon {
                    color: $colorea;
                    border-left: $fontSize10 / 10 solid $colorea;
                }
                .text a {
                    display: block;
                    width: 100%;
                    height: 100%;
                    color: $colorea;
                }
            }
            .choosed {
                .text {
                    width: 9 * $fontSize10 + 9;
                    a {
                        display: block;
                        max-width: 8 * $fontSize10;
                        margin:0 auto;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
                .icon {
                    width: 4 * $fontSize10;
                    font-size: $fontSize16;
                    cursor: pointer;
                }
            }
            .select {
                display: none;
                top: 3 * $fontSize10 + 5;
                width: 14 * $fontSize10;
                height: 10 * $fontSize10 + 6;
                overflow-x: hidden;
                overflow-y: auto;
                background: $colorfff;
                @include border($fontSize10 / 10,solid,$colore5);
                border-top: 0;
                @include borderRadius(0 0 $fontSize10 / 2 $fontSize10 / 2);
                z-index: 5;
                .triangle {
                    top: - $fontSize18 / 2;
                    right: $fontSize12 / 2;
                    border-left: $fontSize14 + 1 solid transparent;
                    border-right: $fontSize14 + 1 solid transparent;
                    border-bottom: $fontSize20 solid $colorfff;
                    z-index:-1;
                }
                a {
                    display: block;
                    padding: $fontSize16 / 2 0 $fontSize16 / 2 $fontSize20;
                    line-height: $fontSize18;
                    color: #999;
                    &:hover {
                        background: #f7f7f7;
                    }
                }
            }
        }
        .timingPost .text {
            margin:$fontSize20 + 5 0 $fontSize20 + 5;
        }
    }
    .timingPost {
        width: 65 * $fontSize10 + 4;
        border-bottom: none;
    }
}
.linkDialog {
    width: 33 * $fontSize10 + 2;
    height:25 * $fontSize10 + 6;
    margin: - 15 * $fontSize10 0 0 (- (16 * $fontSize10 + 6));
    background: $colorfff;
    .titleBox {
        padding:0 $fontSize16;
        height: 4 * $fontSize10 - 1;
        line-height: 4 * $fontSize10 - 1;
        border-bottom: 1px solid $colore5;
        .text {
            font-size: $fontSize14;
            color: $color333;
            font-weight: 700;
        }
        .del a {
            font-size: $fontSize16;
            color: $color333;
        }
    }
    .content {
        padding:$fontSize16 $fontSize16 $fontSize14 / 2;
        > div {
            margin-bottom: $fontSize12 + 1;
        }
        .txt {
            font-size: $fontSize14;
            line-height: $fontSize18;
            color: $color333;
            margin-bottom: $fontSize14 / 2;
            .info {
                font-size: $fontSize12;
                color: $colorab;
            }
        }
        input {
            width: 29 * $fontSize10 + 6;
            height: 3 * $fontSize10 - 2;
            outline-color: $theme;
        }
    }
    .btns {
        a {
            width: 6 * $fontSize12;
            height: 2 * $fontSize18;
            line-height: 2 * $fontSize18;
            font-size: $fontSize14;
        }
        .confirm {
            margin-right: $fontSize10;
            color: $colorfff;
            @include border($fontSize10 / 10,solid,$theme);
            background: $theme;
        }
        .cancel {
            background: #edeff0;
        }
    }
}

//smallDialog
.smallDialog {
    width: 24 * $fontSize10;
    min-height: 21 * $fontSize10;
    margin:- 15 * $fontSize10 0 0 (- 12 * $fontSize10);
    .del {
        padding: $fontSize10;
        a {
            font-size: $fontSize18;
            color: $colorab;
        }
    }
    .content {
        padding:$fontSize12 / 2 2 * $fontSize16 $fontSize20;
        .btns {
            a {
                width: 8 * $fontSize10;
                height: 3 * $fontSize10;
                line-height: 3 * $fontSize10;
                font-size: $fontSize12 + 1;
            }
            .confirm {
                margin-right:$fontSize16 / 2;
                color: $colorfff;
                @include border($fontSize10 / 10,solid,$theme);
                background: $theme;
            }
            .cancel {
                background:#edeff0;
            }
        }
    }
}

//auto-Hidding
.tinyDialog {
    width: 24 * $fontSize10;
    min-height: 14 * $fontSize10 + 2;
    margin:- 10 * $fontSize10 0 0 (- 12 * $fontSize10);
    .content {
        padding:$fontSize20 + 5 2 * $fontSize16 $fontSize10;
    }
}

//bind -> Alipay
.bindDialog,.changeDialog,.setPwdDialog,.changePwdDialog {
    width: 49 * $fontSize10;
    margin: - 21 * $fontSize10 0 0 (- (21 * $fontSize10 + 5));
    .content {
        .titleBox {
            padding:$fontSize20 + 5 3 * $fontSize10 + 5;
            border-bottom: 1px solid $colore5;
            .title {
                font-size: $fontSize18;
                font-weight: 700;
                color: $color333;
            }
            .del {
                font-size: $fontSize18;
                padding:0;
                @include link-colors($colorab,$color666);
            }
        }
        .main {
            padding:3 * $fontSize10 3 * $fontSize10 + 5 4 * $fontSize10;
            input {
                width: 29 * $fontSize10;
            }
            .modelBox {
                margin-bottom: 3 * $fontSize10;
                .txt {
                    width: 9 * $fontSize10 + 6;
                    font-size: $fontSize16;
                    margin:$fontSize10 $fontSize14 + 1 0 0;
                    color: $color333;
                }
            }
            .inputBox {
                input {
                    height: 3 * $fontSize10 + 5;
                    line-height:3 * $fontSize10 + 5;
                    padding-left: $fontSize10;
                    font-size: $fontSize14;
                    color: $color333;
                    outline: none;
                    @include border($fontSize10 / 10,solid,$colordc);
                    &.wrong {
                        border-color: $colorred;
                    }
                    &.active {
                        border-color: $theme;
                    }
                }
                .warning {
                    top:4 * $fontSize10 + 5;
                    font-size: $fontSize12;
                    color: $colorred;
                }
            }
            .checkCode {
                input {
                    width: 15 * $fontSize10 + 3;
                    margin-right: $fontSize12;
                }
                a,.info {
                    font-size: $fontSize12;
                    color: $colorab;
                }
                a:hover {
                    color: $color666;
                }
                .complete {
                    top: $fontSize12;
	                left: 14 * $fontSize10;
	                width: $fontSize16;
	                height: $fontSize16;
	                background-image:url("../img/icons/film.png");
	                background-repeat: no-repeat;
	                background-position: - $fontSize14 0;
                }
            }
            .btns {
                a {
                    margin-top: $fontSize20;
                    width: 14 * $fontSize10;
                    height: 4 * $fontSize10;
                    line-height: 4 * $fontSize10;
                    font-size: $fontSize16;
                }
                .confirm {
                    color: $colorfff;
                    margin-right: $fontSize14 + 1;
                    @include border($fontSize10 / 10,solid,$theme);
                    @include link-posColor($theme,$darkTheme);
                }
                .cancel {
                    color: $color333;
                    background: #edeff0;
                    @include border($fontSize10 / 10,solid,$colore5);
                    @include link-posColor(#edeff0,$colordc);
                }
            }
        }
    }
}

//changeDialog
.changeDialog {
    margin-top: - 25 * $fontSize10;
}

//some common CSS
.authenticateDialog,.bindCellDialog,.checkIdDialog,.changeMailBox,.completeDialog,.resetPwdDialog {
    width:47 * $fontSize10;
    margin:- (20 * $fontSize10 + 5) 0 0 (- (23 * $fontSize10 + 5));
    .content {
        padding:$fontSize20;
    }
    .titleBox {
        h3 {
            font-size: $fontSize16;
            font-weight: 700;
            color: $color333;
        }
        .del {
            font-size: $fontSize16;
            padding:0;
            @include link-colors($colorab,$color666);
        }
    }
}
.authenticateDialog .main .btns,.bindCellDialog .main .btns,.checkIdDialog .main .btns,.changeMailBox .main .btns {
	margin: $fontSize20 0 $fontSize14 + 1;
    a {
        width: 8 * $fontSize10 + 6;
        height: $fontSize20 + 8;
        line-height: $fontSize20 + 8;
        font-size: $fontSize14;
        &:first-child {
            margin-right: $fontSize14 + 1;
        }
    }
    .cancel {
        color: $color666;
        @include border($fontSize10 / 10,solid,$colordc);
        &:hover {
            background: $colordc;
        }
    }
    .confirm {
        @include border($fontSize10 / 10,solid,$theme);
        @include link-colors($theme,$colorfff);
        &:hover {
            background: $theme;
        }
    }
}

//authenticateDialog
.authenticateDialog {
    .main {
        .tellYou {
            font-size: $fontSize14;
            margin:3 * $fontSize10 0 $fontSize20 0;
            color: $color333;
        }
        .clearfix p {
            width: 50%;
            font-size: $fontSize14;
            color:$color333;
            margin-bottom: $fontSize20;
            &:first-child {
                font-weight: 700;
            }
        }
        .tellInput {
            input {
                width: 80%;
                height: 2 * $fontSize12;
                line-height: 2 * $fontSize12;
                @include border($fontSize10 / 10,solid,#999);
                outline: none;
                padding-left: $fontSize16 / 2;
                margin-top: - $fontSize10 / 2;
                &::placeholder {
                    color: $colorab;
                }
            }
            .warning {
                top: 2 * $fontSize10 + 8;
                left: 0;
                font-size: $fontSize12;
                color: $colorred;
            }
        }
    }
}

//bindCellDialog
.bindCellDialog {
    .main {
        .clearfix {
            margin-top: $fontSize20 + 5;
            p {
                font-size: $fontSize14;
                color: $color333;
                &:first-child {
                    width: 28%;
                    margin-top: $fontSize10 / 2;
                    font-weight: 700;
                }
            }
            .tellInput {
                width: 55%;
                input {
                    height: 2 * $fontSize12;
                    padding-left: $fontSize16 / 2;
                    outline: none;
                    @include border($fontSize10 / 10,solid,#999);
                    &::placeholder {
                        color: $colorab;
                    }
                }
                .warning {
                    top: 2 * $fontSize16;
                    left: 0;
                    font-size: $fontSize12;
                    color: $colorred;
                }
            }
            .phoneNum input {
                width: 100%;
            }
            .checkCode {
                input {
                    width: 50
                }
                a {
                    width: 34%;
                    height: 3 * $fontSize10;
                    line-height: 3 * $fontSize10;
                    font-size: $fontSize12;
                    color: $colorfff;
                    margin-left: $fontSize10;
                    @include link-colors(#28c8c8,#45c268);
                }
            }
        }
        .btns {
            margin-top: 4 * $fontSize10;
        }
    }
}

//checkIdDialog
.checkIdDialog {
    .main {
        .keyIcon {
            margin:$fontSize14 + 1 0 2 * $fontSize16;
            img {
                width: 5 * $fontSize10;
                height: 5 * $fontSize10;
                margin-bottom: $fontSize14 + 1;
            }
            h2 {
                font-size: $fontSize16;
                font-weight: 700;
                margin-bottom: $fontSize12 / 2;
            }
        }
        .clearfix p {
            width: 50%;
            margin-bottom: 2 * $fontSize12;
            font-size: $fontSize14;
            color: $color333;
            &:first-child {
                width: 28%;
                margin:$fontSize12 / 2 0 $fontSize10 / 2 0;
                font-weight: 700;
            }
        }
        .tellInput {
            input {
                height: 2 * $fontSize12;
                padding-left: $fontSize16 / 2;
                outline: none;
                @include border($fontSize10 / 10,solid,#999);
                &::placeholder {
                    color: $colorab;
                }
            }
            &.password input {
                width: 100%;
            }
            &.checkCode {
                width: 34%;
                input {
                    width: 78%;
                }
            }
            .warning {
                top: 2 * $fontSize16;
                left: 0;
                font-size: $fontSize12;
                color: $colorred;
            }
        }
        .checkCodeBox {
            width: 8 * $fontSize10;
            height: 2 * $fontSize10 + 6;
            @include border($fontSize10 / 10,solid,#999);
            overflow: hidden;
            cursor: pointer;
            &:hover {
                .renew {
                    display: block;
                }
            }
            .renew {
                display: none;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0,0,0,.5);
            }
            .renewIcon {
                width: $fontSize22;
                height: $fontSize22;
                top: $fontSize10 / 5;
                right: 3 * $fontSize10 - 2;
                background: url("../img/icons/renew.png") no-repeat center center;
                background-size: 100%;
            }
        }
    }
}

//changeMailBox
.changeMailBox {
    .main {
        .clearfix {
            margin-top: 2 * $fontSize16;
            p {
                width: 50%;
                font-size: $fontSize14;
                color: $color333;
                &:first-child {
                    width: 28%;
                    margin-top: $fontSize10 / 2;
                    font-weight: 700;
                }
            }
        }
        .tellInput {
            input {
                width: 80%;
                height: 2 * $fontSize12;
                @include border($fontSize10 / 10,solid,#999);
                padding-left:$fontSize16 / 2;
                outline: none;
                &::placeholder {
                    color: $colorab;
                }
            }
        }
        .mailBox {
            .warning {
                top:2 * $fontSize16;
                left:0;
                font-size: $fontSize12;
                color: $colorred;
            }
        }
        .btns {
            margin-top: 3 * $fontSize10 + 5;
        }
    }
}

//completeDialog
.completeDialog {
    .main {
        .completeIcon {
            margin:$fontSize20 + 5;
            img {
                width:6 * $fontSize10 - 3;
                height: 6 * $fontSize10 - 3;
                margin-bottom: $fontSize14 + 1;
            }
            h2 {
                font-size: $fontSize16;
                font-weight: 700;
                margin-bottom: $fontSize10;
                span {
                    color: $colorred;
                }
            }
        }
        .btns {
            margin:$fontSize20 0;
            a {
                width: 8 * $fontSize10 + 6;
                height:$fontSize20 + 8;
                line-height: $fontSize20 + 8;
                font-size:$fontSize14;
                &:first-child {
                    margin-right: $fontSize14 + 1;
                }
            }
            .confirm {
                @include link-colors($theme,$colorfff);
                @include border($fontSize10 / 10,solid,$theme);
                &:hover {
                    background: $theme;
                }
            }
            .cancel {
                color: $color666;
                @include border($fontSize10 / 10,solid,$colordc);
                &:hover {
                    background: $colordc;
                }
            }
        }
    }
}

//resetPwdDialog
.resetPwdDialog {
    .main {
        .clearfix {
            margin:$fontSize20 + 6 0 $fontSize16 / 2;
            p {
                width: 50%;
                font-size: $fontSize14;
                color: $color333;
                &:first-child {
                    width: 40%;
                    margin-top: $fontSize12 / 2;
                    font-weight: 700;
                }
            }
            input {
                width: 80%;
                height: 2 * $fontSize12;
                @include border($fontSize10 / 10,solid,#999);
                padding-left:$fontSize16 / 2;
                outline: none;
                &::placeholder {
                    color: $colorab;
                }
            }
        }
        .tellInput .warning {
            top: 2 * $fontSize16;
            left: 0;
            font-size: $fontSize12;
            color: $colorred;
        }
        .btns {
            margin:4 * $fontSize10 0 $fontSize10 + 5;
            a {
                width: 8 * $fontSize10 + 6;
                height: 3 * $fontSize10 - 2;
                line-height: 3 * $fontSize10 - 2;
                font-size: $fontSize14;
                &:first-child {
                    margin-right: $fontSize10 + 5;
                }
            }
            .confirm {
                @include link-colors($theme,$colorfff);
                @include border($fontSize10 / 10,solid,$theme);
                &:hover {
                    background: $theme;
                }
            }
            .cancel {
                color: $color666;
                @include border($fontSize10 / 10,solid,$colordc);
                &:hover {
                    background: $colordc;
                }
            }
        }
    }
}

//authenticationDialog
.authenticationDialog {
    width: 81 * $fontSize10;
    margin:- 28 * $fontSize10 0 0 (- 41 * $fontSize10);
    .content {
        padding:2 * $fontSize18 4 * $fontSize10 2 * $fontSize22;
        .passCheck {
            top: 4 * $fontSize10 + 5;
            right: 3 * $fontSize20;
            width: 14 * $fontSize10 + 7;
            height: 13 * $fontSize10 + 9;
            background: url("../img/icons/chuo.png") no-repeat center center;
            z-index: 5;
        }
    }
    .titleBox {
        margin-bottom: $fontSize20;
        font-size: $fontSize16;
        color: $color111;
        .del {
            padding:0;
            font-size: $fontSize18;
            &:hover {
                color: $color333;
            }
        }
    }
    .address-wrap {
        .label-name {
            width: 4 * $fontSize20;
            height: 4 * $fontSize10 + 6;
            line-height: 4 * $fontSize10 + 6;
            font-size: $fontSize14;
            color: $color333;
        }
        .address-group {
            width: 62 * $fontSize10 + 8;
            margin-left: $fontSize16 / 2;
            color: $color666;
            span {
                top: $fontSize14 + 1;
                left: $fontSize12;
                font-size: $fontSize16;
                color: $color333;
            }
        }
        .form-control {
            width: 100%;
            height: 4 * $fontSize10 + 6;
            line-height: 4 * $fontSize10 + 6;
            font-size: $fontSize14;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            -ms-box-sizing: border-box;
            -o-box-sizing: border-box;
            box-sizing: border-box;
            padding:$fontSize12 / 2 $fontSize12;
            @include border($fontSize10 / 10,solid,$colorccc);
            outline: none;
        }
        .error-tip {
            height: $fontSize20 + 5;
            line-height: $fontSize20 + 5;
            font-size: $fontSize12;
            color: #EF1300;
        }
    }
    .uploadPic {
        margin-top: $fontSize10;
        .title {
            font-size: $fontSize14;
            color: $color333;
            margin-bottom: $fontSize20;
            .tips {
                font-size: $fontSize12 + 1;
                color: #b6b6b6;
                margin-left: 2 * $fontSize12;
            }
        }
        .upload {
            display: inline-block;
            width: 23 * $fontSize10;
            height: 14 * $fontSize10 + 5;
            line-height: 14 * $fontSize10 + 5;
            margin-right: $fontSize16 / 2;
            @include border($fontSize10 / 10,solid,$colordc);
            &.num1 {
                background: url("../img/icons/idcardFront.jpg") no-repeat center center;
                background-size: 23 * $fontSize10 14 * $fontSize10 + 5;
            }
            &.num2 {
                background: url("../img/icons/idcardBack.jpg") no-repeat center center;
                background-size: 23 * $fontSize10 14 * $fontSize10 + 5;
            }
            &.num3 {
                background: url("../img/icons/idcardHold.jpg") no-repeat center center;
                background-size:23 * $fontSize10 14 * $fontSize10 + 5;
            }
            .uploadBtn {
                display: inline-block;
                visibility: visible;
                width: 4 * $fontSize10 + 5;
                height: 4 * $fontSize10 + 5;
                line-height: 4 * $fontSize10 - 1;
                margin:4 * $fontSize10 + 3 auto 0;
                font-size:3 * $fontSize10 + 7;
                color: $colorfff;
                @include boxShadow(0 0 $fontSize12 #b9b9b9);
                cursor: pointer;
                @include link-posColor(rgba(0,164,233,.8),$darkTheme);
                input {
                    width: 100%;
                    height: 100%;
                    top: 0;
                    left: 0;
                    @include opacity(0);
                    cursor: pointer;
                    z-index: 9;
                }
            }
            .completeIcon {
                display: block;
                width: 3 * $fontSize10 + 4;
                height: 3 * $fontSize10 + 4;
                bottom: $fontSize10;
                right: $fontSize10;
                background: url("../img/icons/upload.png") no-repeat center center;
                background-size: 100%;
            }
        }
        .tipText {
            margin-top: $fontSize12;
            p {
                width: 23 * $fontSize10;
                margin-right: $fontSize16 / 2;
                font-size: $fontSize12 + 1;
                color: $color666;
            }
        }
        .infoMsg {
            margin-top: $fontSize20;
            font-size: $fontSize14;
            color: $colorred;
        }
        .submit {
            width: 13 * $fontSize10 + 6;
            height: 4 * $fontSize10;
            line-height: 4 * $fontSize10;
            font-size: $fontSize16;
            color:$colorfff;
            margin:3 * $fontSize10 + 5 auto 0;
            @include link-posColor($theme,$darkTheme);
        }
    }
}

//changePicDialog
.changePicDialog {
    width: 50 * $fontSize10;
    margin:- 27 * $fontSize10 0 0 (- 25 * $fontSize10);
    .recommendPic {
        margin:$fontSize16 / 2 0 $fontSize20;
        img {
            width: 9 * $fontSize10 + 5;
            height: 9 * $fontSize10 + 5;
        }
        .loading {
            width: 9 * $fontSize10 + 5;
            height: 9 * $fontSize10 + 5;
            line-height: 10 * $fontSize10 + 9;
            top: 0;
            left: 50%;
            margin-left: - 4 * $fontSize12;
            color: $theme;
            background: rgba(0,0,0,.2);
            z-index: 5;
        }
    }
    .changesBtn {
        margin:0 auto 3 * $fontSize10;
        font-size: $fontSize14;
        a {
            @include link-colors($theme,$darkTheme);
        }
        .exchange {
            margin-right: 5 * $fontSize10;
        }
        .uploadPic {
            input {
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                @include opacity(0);
                cursor: pointer;
            }
        }
    }
    .userPicChange {
        .inputBox {
            .nickName {
                width: 33 * $fontSize10;
            }
            input {
                width: 100%;
                font-size: $fontSize14 + 1;
                color: $color666;
                padding-bottom: $fontSize12 / 2;
                border:none;
                outline: none;
                border-bottom:1px solid $colore5;
                &::placeholder {
                    color: $colorab;
                }
            }
        }
    }
}
.changePicDialog,.aboutMeDialog {
    .titleBox {
        font-size: $fontSize16;
        color:$color111;
        height: 5 * $fontSize10 + 4;
        line-height: 5 * $fontSize10 + 4;
        padding:0 3 * $fontSize10;
        border-bottom: 1px solid $colore5;
        .del {
            padding:0;
            font-size: $fontSize18;
            &:hover {
                color: $color333;
            }
        }
    }
}
.changePicDialog .userPicChange,.aboutMeDialog .editMsg {
    padding:$fontSize20;
    .inputBox {
        .txt {
            width: 7 * $fontSize10;
            font-size: $fontSize16;
            margin:$fontSize10 / 5 3 * $fontSize10 3 * $fontSize10 + 5 0;
            line-height: $fontSize20;
            color: $color333;
        }
        .describe {
            width: 33 * $fontSize10;
        }
        textarea {
            width: 31 * $fontSize10 + 4;
            min-height: 7 * $fontSize10;
            padding:$fontSize16 / 2;
            font-size:$fontSize14 + 1;
            color: $color666;
            line-height: $fontSize18;
            outline: none;
            @include border($fontSize10 / 10,solid,$colore5);
            resize: none;
            &::placeholder {
                color: $colorab;
            }
        }
    }
    .btns {
        margin:3 * $fontSize10 0 $fontSize10 + 5;
        a {
            width: 10 * $fontSize10 + 5;
            height: 3 * $fontSize10 + 5;
            line-height: 3 * $fontSize10 + 5;
            font-size: $fontSize14;
        }
        .confirm {
            color: $colorfff;
            margin-right: 3 * $fontSize10 + 5;
            @include border($fontSize10 / 10,solid,$theme);
            @include link-posColor($theme,$darkTheme);
        }
        .cancel {
            @include border($fontSize10 / 10,solid,$colordc);
            @include link-posColor(#edeff0,$colordc);
        }
    }
}

//aboutMeDialog
.aboutMeDialog {
    width: 50 * $fontSize10;
    margin:- 20 * $fontSize10 0 0 (- 25 * $fontSize10);
}

//postFinishedDialog
.postFinishedDialog {
    width: 26 * $fontSize10;
    height: 24 * $fontSize10 + 5;
    margin:- 15 * $fontSize10 0 0 (- 13 * $fontSize10);
    background: $colorfff;
    .titleBox {
        padding:$fontSize10 $fontSize10 0;
        .del {
            padding:0;
            font-size: $fontSize16;
            &:hover {
                color: $color333;
            }
        }
    }
    .infos {
        border-bottom: 1px solid $colore5;
        .icons {
            width: 4 * $fontSize10 + 5;
            height: 4 * $fontSize10 + 5;
            margin:0 auto $fontSize14 + 1;
            background-image: url("../img/icons/dialog.png");
            background-position: - ($fontSize20 + 3) 0;
            background-repeat: no-repeat;
        }
        .tip {
            font-size: $fontSize14;
            color: $color666;
            margin-bottom:$fontSize18;
            .check {
                width:5 * $fontSize10;
                height: 2 * $fontSize10 + 6;
                line-height: 2 * $fontSize10 + 6;
                font-size: $fontSize14;
                margin-left: $fontSize20;
                @include border($fontSize10 / 10,solid,$theme);
                @include link-colors($theme,$colorfff);
                &:hover {
                    background: $theme;
                }
            }
        }
    }
    .shares {
        padding:$fontSize14 5 * $fontSize10 0;
        a {
            width: 3 * $fontSize10 + 4;
            height: 3 * $fontSize10 + 4;
            text-indent: 0;
            margin:0 $fontSize16 / 2 $fontSize12 0;
            background-image: url("../img/icons/postFinished.png");
            background-repeat: no-repeat;
            &.bds_tsina {
                @include link-backPos((- (12 * $fontSize10 + 2) (- (3 * $fontSize10 + 7))),(- (12 * $fontSize10 + 3) 0));
            }
            &.bds_weixin {
                @include link-backPos((- (4 * $fontSize10 + 1) (- (3 * $fontSize10 + 7))),(- (4 * $fontSize10 + 1) 0));
            }
            &.bds_sqq {
                @include link-backPos((0 (- (3 * $fontSize10 + 7))),(0 0));
            }
            &.bds_qzone {
                @include link-backPos((- (8 * $fontSize10 + 2) (- (3 * $fontSize10 + 7))),(- (8 * $fontSize10 + 2) 0));
            }
        }
        .tip {
            font-size: $fontSize14;
            line-height: $lineHeight - 0.2;
            color: #aeaeae;
        }
    }
}

//newRewardDialog
.newRewardDialog {
    width: 52 * $fontSize10;
    margin:- 35 * $fontSize10 0 0 (- 26 * $fontSize10);
    .titleBox {
        height: 2 * $fontSize22;
        line-height: 2 * $fontSize22;
        font-size: $fontSize16;
        border-bottom: 1px solid $colore5;
        .del {
            margin-right: $fontSize20;
            padding:0;
            font-size: $fontSize16;
            &:hover {
                color: $color333;
            }
        }
    }
    .newReward {
        .writeBox {
            padding:$fontSize14 + 1 3 * $fontSize10 3 * $fontSize10;
            > div {
                margin-bottom: $fontSize10;
            }
            .text {
                width: 8 * $fontSize10;
                margin:$fontSize10 / 2 $fontSize20 0 0;
                color: $color333;
            }
            input {
                line-height: $lineHeight;
                border: none;
                outline: none;
                padding-bottom: $fontSize10 / 5;
                font-size: $fontSize14;
                margin-left: $fontSize12 / 4;
                border-bottom: 1px solid $colore5;
            }
        }
        .payWays,.packYear,.populationLimit,.chargeTime {
            label {
                display: inline-block;
                font-size: $fontSize12;
                color: $color666;
                margin:$fontSize16 / 2 $fontSize20 0 0;
                cursor: pointer;
                input {
                    width: $fontSize12;
                    vertical-align: middle;
                    margin-top: 0;
                }
            }
        }
        .packYear {
            p {
                margin-top: $fontSize16 / 2;
                padding-left: $fontSize10 / 2;
                font-size: $fontSize14;
                color: $color666;
            }
            .rmb {
                margin: 0 $fontSize12;
                font-size: $fontSize16;
                color: $colorred;
                font-weight: 700;
            }
            .discount {
                margin-left: $fontSize10;
                color: #ff9966;
                font-size: $fontSize12;
            }
        }
        .name input {
            width: 20 * $fontSize10;
            line-height: $lineHeight;
            &::placeholder {
                color: $colorab;
            }
        }
        .picture {
            .addPic {
                width: 18 * $fontSize10 + 2;
                height: 10 * $fontSize10;
                @include border($fontSize10 / 10,dashed,$colore5);
                background: #f8fafc;
                .btn {
                    width: 15 * $fontSize10;
                    margin: $fontSize12 auto 0;
                    font-size: $fontSize12 + 1;
                    color: $colorab;
                    line-height: $fontSize18;
                    input {
                        width: 100%;
                        height: 100%;
                        top: 0;
                        left: 0;
                        @include opacity(0);
                        cursor: pointer;
                    }
                }
                .icon {
                    width: 4 * $fontSize10 + 6;
                    height: 2 * $fontSize18;
                    background: url(../img/editor/addPic.png) no-repeat center center;
                    background-size: 100%;
                    margin: 0 auto $fontSize12 / 3;
                }
                .text {
                    font-size: $fontSize12;
                    color: $colorab;
                    width: 100%;
                    margin: 0 auto;
                    line-height: $lineHeight - 0.2;
                }
                .picture {
                    width: 100%;
                    height: 100%;
                    top: 0;
                    left: 0;
                    background-repeat: no-repeat;
                    background-position: center;
                    background-size: cover;
                    z-index: 5;
                }
            }
            .renew {
                bottom: 0;
                right: 0;
                width: 4 * $fontSize10;
                height: 2 * $fontSize12;
                line-height: 2 * $fontSize12;
                font-size: $fontSize12;
                color: $colorfff;
                background: rgba(0,0,0,.35);
                z-index: 9;
                input {
                    width: 100%;
                    height: 100%;
                    top: 0;
                    left: 0;
                    @include opacity(0);
                    cursor: pointer;
                }
            }
            .del {
                display: none;
                top: 0;
                right: 0;
                width: 3 * $fontSize10;
                height: $fontSize20 + 5;
                line-height: $fontSize20 + 5;
                font-size: $fontSize12;
                padding : 0;
                background: rgba(0,0,0,.35);
                z-index: 9;
                @include link-colors($colorfff,red);
            }
            .upload:hover .del {
                display: block;
            }
        }
        .describe textarea {
            width: 33 * $fontSize10 + 5;
            height: 5 * $fontSize10 + 2;
            padding: $fontSize16 / 2;
            line-height: $fontSize18;
            font-size: $fontSize12;
            color: $color333;
            resize: none;
            outline: none;
            &::placeholder {
                color: $colorab;
            }
        }
        .populationLimit {
            .population {
                font-size: $fontSize12;
                color: $color666;
                input {
                    max-width: 3 * $fontSize22;
                    padding: 0 $fontSize16 / 2;
                    margin: 0 $fontSize12 / 3;
                    color: $colorred;
                    font-weight: 700;
                    text-align: center;
                }
            }
        }
        .chargeTime {
            .right {
                .box {
                    vertical-align: top;
                    > span {
                        font-size: $fontSize12;
                        color: $color666;
                        display: inline-block;
                        vertical-align: top;
                        margin-top: $fontSize16 / 2;
                    }
                }
            }
            .calendar {
                height: 26px;
                line-height: 26px;
                padding: 0 10px;
                font-size: 14px;
                color: #666;
                border-bottom: 1px solid #e5e5e5;
            }
            .timeChoosed {
                width: 9 * $fontSize10 + 5;
                text-align: center;
            }
            .calendarIcon {
                font-size: $fontSize16;
                margin-left: $fontSize12 / 2;
            }
        }
        .btns {
            margin-bottom: 0 !important;
            a {
                width: 8 * $fontSize10 + 6;
                height: 2 * $fontSize16;
                line-height: 2 * $fontSize16;
                font-size: $fontSize14;
                margin-top: $fontSize14;
            }
            .save {
                color: $colorfff;
                margin-right: $fontSize20;
                border-color: $theme;
                @include link-posColor($theme,$darkTheme);
            }
            .cancel {
                color: $color666;
                @include link-posColor(#f2f5f5,$colore5);
            }
        }
    }
    .price {
        .right {
            font-size: $fontSize14;
            color: $color333;
        }
        input {
            max-width: 10 * $fontSize10;
            text-align: center;
            font-weight: 700;
            color: $colorred;
        }
    }
}

//couponUseDialog
.couponUseDialog {
    width: 55 * $fontSize10;
    margin:- 30 * $fontSize10 0 0 (- (27 * $fontSize10 + 5));
    .titleBox {
        height: 2 * $fontSize22;
        line-height: 2 * $fontSize22;
        font-size: $fontSize16;
        color: $color111;
        border-bottom: 1px solid $colore5;
        .del {
            font-size: $fontSize16;
            margin-right: $fontSize20;
            padding:0;
            &:hover {
                color: $color333;
            }
        }
    }
    .searchBox {
        margin:$fontSize16 3 * $fontSize10;
        .word {
            margin:$fontSize16 / 2 $fontSize10 0 0;
            font-size: $fontSize14;
            color: $color666;
            vertical-align: top;
        }
        .searchInput {
            width: 19 * $fontSize10 + 2;
            height: $fontSize20 + 8;
            line-height: $fontSize20 + 8;
            @include border($fontSize10 / 10,solid,#929292);
            overflow: hidden;
            &.active {
                border-color: $theme;
            }
            input {
                width: 18 * $fontSize10 + 4;
                height: $fontSize20 + 6;
                padding-left:$fontSize16 / 2;
                font-size: $fontSize14;
                color: $color333;
                border:none;
                outline: none;
            }
        }
        .searchBtn {
            right: $fontSize10;
            top: 0;
            height: $fontSize20 + 8;
            line-height: $fontSize20 + 8;
            font-size: $fontSize16;
            @include link-colors(#929292,$theme);
        }
    }
    .userList {
        width: 46 * $fontSize10;
        margin:0 auto;
        overflow: hidden;
        > div {
            height: 3 * $fontSize10;
            line-height: 3 * $fontSize10;
        }
        p {
            text-align: center;
            float: left;
        }
        .tab {
            background: #e8f1f7;
            p {
                font-size: $fontSize14;
                color: $color111;
            }
        }
        .number {
            width: 8 * $fontSize10;
        }
        .nickName {
            width: 26 * $fontSize10;
        }
        .control {
            width: 11 * $fontSize10 + 8;
            input {
                width: $fontSize14;
                height: $fontSize14;
                cursor: pointer;
            }
        }
        .uer {
            p {
                font-size: $fontSize14;
                color: $color666;
                border-right: 1px solid $colore5;
                border-top: 1px solid $colore5;
                &:last-child {
                    border-right: 0;
                }
            }
            &:nth-child(2) p {
                border-top: 0;
            }
        }
    }
    .page {
        margin-top: $fontSize20;
        .pageList li {
            margin:0 $fontSize16 0 0;
        }
    }
    .nextStep {
        width: 9 * $fontSize10;
        height: 2 * $fontSize18;
        line-height: 2 * $fontSize18;
        margin:$fontSize20 auto 3 * $fontSize10;
        font-size: $fontSize14;
        color: $colorfff;
        @include link-posColor($theme,$darkTheme);
    }
}

//sendLetterDialog
.sendLetterDialog {
    width: 71 * $fontSize10 + 6;
    margin:- (20 * $fontSize10 + 4) 0 0 (- (35 * $fontSize10 + 8));
    background:$colorfff;
    .content {
        padding:$fontSize20 2 * $fontSize12 3 * $fontSize10;
        .del {
            font-size: $fontSize16;
            &:hover {
                color: $color333;
            }
        }
    }
    .sendTo {
        font-size: $fontSize16;
        margin-bottom: $fontSize16;
        color: $colorab;
        .nickName {
            margin:0 $fontSize12 / 4;
            color: $color111;
        }
    }
    .inputField {
        height: 24 * $fontSize10;
        padding: $fontSize12;
        outline: none;
        margin-bottom: $fontSize20;
        font-size: $fontSize14;
        line-height: $lineHeight;
        @include border($fontSize10 / 10,solid,$colore5);
        background: #f2f2f2;
        overflow-y: auto;
    }
    .tips {
        font-size: $fontSize14;
        color: $colorab;
        .num {
            color: $theme;
        }
    }
    .btns {
        a {
            width: 10 * $fontSize10;
            height: 4 * $fontSize10;
            line-height: 4 * $fontSize10;
            font-size: $fontSize16;
            margin-left: $fontSize20;
            color: $colorfff;
        }
        .sendBtn {
            @include link-posColor($theme,$darkTheme);
        }
        .cancelBtn {
            @include link-posColor(#d6d6d6,$colorccc);
        }
    }
}

//delCollectDialog
.delCollectDialog {
    width: 36 * $fontSize10;
    margin: - 16 * $fontSize10 0 0 (- 18 * $fontSize10);
    background: $colorfff;
    .icon {
        width: 3.7 * $fontSize10;
        height: 4.2 * $fontSize10;
        margin: 3 * $fontSize10 auto $fontSize20;
        background: url("../img/icons/dialog.png") no-repeat (- 2.5 * $fontSize10) (- 5 * $fontSize10);
    }
    .tips {
        font-size: $fontSize16;
        color: $color333;
        line-height: $lineHeight;
        padding: 0 4 * $fontSize10;
        span {
            color: $theme;
        }
    }
    .btns {
        height: 5.8 * $fontSize10;
        line-height: 5.8 * $fontSize10;
        margin-top: 3.5 * $fontSize10;
        a {
            width: 49.75%;
            font-size: $fontSize16;
            border-top: $fontSize10 / 10 solid $colore5;
            &:hover {
                color: $color000;
            }
        }
        .confirmBtn {
            border-right: $fontSize10 / 10 solid $colore5;
        }
    }
}

//collectDialog
.collectDialog {
    width: 52 * $fontSize10;
    margin: - 23.7 * $fontSize10 0 0 (- 26 * $fontSize10);
    .titleBox {
        padding:0 2 * $fontSize14;
        height: 5.2 * $fontSize10;
        line-height: 5.2 * $fontSize10;
        font-size: $fontSize16;
        color: $color333;
        border-bottom: $fontSize10 / 10 solid $colore5;
    }
    .collectList {
        height: 31.2 * $fontSize10;
        padding: 0 2 * $fontSize14;
        overflow-x: hidden;
        overflow-y: auto;
        &::-webkit-scrollbar {
            width:$fontSize10 / 2;
            height:$fontSize10 / 2;
        }
        &::-webkit-scrollbar-track {
            background: #FF66D5;
        }
        &::-webkit-scrollbar-thumb {
            background: $colorccc;
            @include borderRadius($fontSize16);
        }
        &::-webkit-scrollbar-track-piece {
            background: #eee;
        }
        .item {
            padding: $fontSize14 0;
            font-size: $fontSize14;
            color: $color333;
            border-bottom: $fontSize10 / 10 solid $colore5;
            &:last-child {
                border-bottom: 0;
            }
            i {
                display: none;
                font-size: $fontSize16;
                color: $colorab;
                vertical-align: top;
                margin:$fontSize12 / 4 0 0 $fontSize16 / 2;
            }
            &.active i {
                display: inline-block;
            }
        }
        .fileName {
            margin-top: $fontSize12 / 2;
            span {
                display: inline-block;
                max-width: 30 * $fontSize10;
                line-height: $lineHeight;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                word-break: break-all;
                word-wrap: break-word;
            }
        }
        .collectBtn {
            display: block;
            width: 8.6 * $fontSize10;
            height: 2 * $fontSize16;
            line-height: 2 * $fontSize16;
            font-size: $fontSize14;
            color: $colorfff;
            @include border($fontSize10 / 10,solid,$theme);
            @include link-posColor($theme,$darkTheme);
            &.active {
                color: $color666;
                border-color: $colordc;
                background: $colorfff;
            }
        }
    }
    .createCollectBtn {
        margin:0 2 * $fontSize14;
        height: 7 * $fontSize10;
        line-height: 7 * $fontSize10;
        font-size: $fontSize18;
        color: $color333;
        border-top: $fontSize10 / 10 solid $colore5;
        i {
            display: inline-block;
            width: $fontSize22;
            height: $fontSize22;
            line-height: $fontSize20;
            color: $colorfff;
            font-size: $fontSize22;
            vertical-align: top;
            margin:2.5 * $fontSize10 $fontSize10 0 0;
            background: $theme;
        }
    }
}

//buildCollectDialog && editCollectDialog -> common CSS
.buildCollectDialog,.editCollectDialog  {
    width: 54 * $fontSize10;
    margin:- 23 * $fontSize10 0 0 (- 27 * $fontSize10);
    .titleBox {
        padding: $fontSize18 2 * $fontSize12 $fontSize12;
        line-height: $lineHeight;
        font-size: $fontSize16;
        color: $color333;
        border-bottom: $fontSize10 / 10 solid $colore5;
        .title {
            width: 47.5 * $fontSize10;
        }
        .tip {
            font-size: $fontSize12;
            color: #919191;
        }
    }
    .editBox {
        padding:0 2 * $fontSize12;
        .collectName {
            margin:$fontSize20 0 0;
            padding: 0 $fontSize20 0 0;
            height: 4.5 * $fontSize10;
            line-height: 4.5 * $fontSize10;
            overflow:hidden;
            background: #f2f2f2;
            input {
                width: 90%;
                height: 4.3 * $fontSize10;
                border:none;
                outline: none;
                font-size: $fontSize14;
                color: $color333;
                padding-left: $fontSize16;
                background: #f2f2f2;
                &::placeholder {
                    color: $theme;
                }
            }
        }
        .wordsLimit {
            font-size: $fontSize14;
            color: $theme;
            right: $fontSize16 / 2;
            &.warning span {
                color: #ff0000;
            }
        }
        .classify {
            margin:$fontSize16 0;
            font-size: $fontSize14;
            label {
                margin-right: $fontSize14 + 1;
                cursor: pointer;
            }
            input {
                vertical-align: top;
                margin-top: 0;
            }
        }
        .description {
            margin-bottom: 2 * $fontSize12;
            textarea {
                display: block;
                padding:$fontSize14 $fontSize16;
                width: 45.8 * $fontSize10;
                height: 10.5 * $fontSize10;
                line-height:$lineHeight - 0.1;
                border:none;
                outline: none;
                resize: none;
                font-size: $fontSize14;
                color: $color333;
                background: #f2f2f2;
                &::placeholder {
                    color: #a9a9a9;
                }
            }
            .wordsLimit {
                bottom: - $fontSize20;
                &.warning span {
                    color:#ff0000;
                }
            }
        }
        .permission {
            font-size: $fontSize14;
            label {
                cursor: pointer;
                &:first-child {
                    margin-right: $fontSize14 + 1;
                }
            }
            input {
                vertical-align: top;
                margin-top: 0;
            }
            span {
                color: #bbb;
            }
        }
        .btns {
            margin: 2.5 * $fontSize10 0 3.5 * $fontSize10;
            a {
                width: 11 * $fontSize10;
                height: 4.2 * $fontSize10;
                line-height: 4.2 * $fontSize10;
                font-size: $fontSize16;
                color: $colorfff;
            }
            .confirmBtn {
                margin-right: $fontSize20;
                @include link-posColor($theme,$darkTheme);
            }
            .cancelBtn {
                @include link-posColor(#d6d6d6,#dbdbdb);
            }
        }
    }
}

//editCollectDialog
.editCollectDialog {
    margin-top: - 31.5 * $fontSize10;
    .collectCover {
        margin: $fontSize16 0 0;
        padding-top: $fontSize14;
        border-top: $fontSize10 / 10 solid $colore5;
        p {
            font-size: $fontSize14;
            margin-bottom: $fontSize12;
        }
        .cover {
            width: 21 * $fontSize10;
            height: 11.8 * $fontSize10;
            display: inline-block;
            overflow: hidden;
            &:hover .renewBtn {
                display: block;
            }
        }
        .coverPic {
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }
        .renewBtn {
            display: none;
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 11.8 * $fontSize10;
            top: 0;
            left: 0;
            font-size: $fontSize16;
            color: $colorfff;
            background: rgba(0,0,0,.3);
            z-index: 5;
            input {
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                @include opacity(0);
                cursor: pointer;
                z-index: 9;
            }
        }
        .tips {
            display: inline-block;
            vertical-align: bottom;
            margin:0 0 $fontSize10 / 2 $fontSize12;
            font-size: $fontSize12;
            color: $colorab;
        }
    }
}
